<template>
  <div class="components-container feature-out">
    <div class="filter-container" ref="searchDiv">
      <el-date-picker
        v-model="datePicker"
        ref="pick"
        size="small"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
      >
      </el-date-picker>
      <el-select
        size="small"
        v-model="listQuery.datasource"
        clearable
        placeholder="请选择数据源接口"
        @change="sourceChange(listQuery.datasource)"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="(item, index) in source_name"
          :key="index"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listQuery.field"
        clearable
        :disabled="listQuery.datasource === null || listQuery.datasource === ''"
        placeholder="请选择特征"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="(item, index) in field"
          :key="index"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      > -->
    </div>
    <el-table
      :data="tableData"
      :max-height="tableHeight"
      style="width: 100%;margin-bottom: 12px;"
    >
      <!-- <el-table-column
        label="时间"
        prop="create_time"
        align="center"
        width="160px"
      ></el-table-column> -->
      <el-table-column
        label="数据源"
        prop="datasource"
        align="center"
        width="120px"
      ></el-table-column>
      <el-table-column
        label="数据表"
        prop="feature_table"
        align="center"
        width="200px"
      ></el-table-column>
      <el-table-column
        label="特征名称"
        prop="feature_code"
        align="center"
      ></el-table-column>
      <el-table-column
        label="调用次数"
        prop="count"
        align="center"
      ></el-table-column>
      <el-table-column
        label="有效值率"
        prop="valid_ratio"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        label="异常值率"
        prop="exceptionRate"
        align="center"
      ></el-table-column> -->
      <el-table-column
        label="空值率"
        prop="empty_ratio"
        align="center"
      ></el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page_num"
        :page-sizes="[10, 20, 50]"
        :page-size="listQuery.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { parseTimeJS as parseTime } from '@/utils' // 时间控件
import {
  getList,
  loadDatasource,
  loadFeatureCode
} from '@/api/risksystem/dataGateway/field.ts'

const defaultQuery = {}
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private startDate = new Date().setTime(
    new Date().getTime() - 3600 * 1000 * 24 * 30
  )
  private endDate = new Date()
  private tableHeight: any = null
  private tableData = []
  private source_name = []
  private field = []

  private total = 0
  private datePicker: any = [
    this.formatDate(new Date(this.startDate)),
    this.formatDate(new Date())
  ]
  private listQuery: any = {
    datasource: null,
    field: null,
    page_size: 10,
    page_num: 1,
    start_date: this.datePicker[0],
    end_date: this.datePicker[1]
  }
  created() {
    this.getTable()
    this.loadDatasource()
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.listQuery.start_date = this.datePicker ? this.datePicker[0] : undefined
    this.listQuery.end_date = this.datePicker ? this.datePicker[1] : undefined
  }
  mounted() {
    this.init()
  }
  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
  }
  // 表格高度
  private init() {
    var _this = this
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 230
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 230
      })
    }
  }
  private async loadDatasource() {
    const { data } = await loadDatasource()
    this.source_name = data
  }
  private sourceChange(val: any) {
    this.listQuery.field = null
    this.loadFeatureCode(val)
  }
  private async loadFeatureCode(val: any) {
    const { data } = await loadFeatureCode({
      datasource: val
    })
    this.field = data
  }
  // 列表获取
  private async getTable() {
    const { data } = await getList(this.listQuery)
    this.tableData = data.list
    this.total = Number(data.count)
  }

  // 查询、重置
  private handleFilter(val: string) {
    this.listQuery.current_page = 1
    this.getTable()
  }
  // 跳转页码查询
  handleCurrentChange(val: any) {
    this.listQuery.page = val
    this.getTable()
  }
  // size切换查询
  handleSizeChange(val: any) {
    this.listQuery.limit = val
    this.getTable()
  }
  private handleReset(val: string) {
    this.datePicker = [
      this.formatDate(new Date(this.startDate)),
      this.formatDate(new Date())
    ]
    this.listQuery = {
      datasource: null,
      field: null,
      page_size: 10,
      page_num: 1,
      start_date: this.datePicker[0],
      end_date: this.datePicker[1]
    }
    this.getTable()
  }
  private async downloand() {
    // const res = await listDownload(this.listQuery)
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return year + '-' + month + '-' + date
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
